Overview

This PR enhances the React documentation website's sidebar navigation by allowing users to toggle dropdowns when clicking an already-selected item. This improves overall navigation usability and aligns the behavior with common UI expectations.

Problem Statement

Previously, clicking on an active/selected sidebar item that had a dropdown produced no action.
Users naturally expect that clicking the same selected item again should collapse the dropdown—similar to accordion-style navigation patterns.

This mismatch resulted in:

• Reduced control over expanded sections
• Unnecessary vertical scrolling
• A navigation flow that felt less intuitive

Solution

A toggle mechanism has been implemented to allow collapsing an expanded dropdown by clicking the currently selected item a second time.

Technical Changes

Modified Files

src/components/Layout/Sidebar/SidebarLink.tsx

• Added optional onClick prop to support custom click behavior
• Passed onClick handler down to the underlying Link component

src/components/Layout/Sidebar/SidebarRouteTree.tsx

• Imported useState and useEffect
• Extracted a new SidebarItem component to encapsulate item-level logic
• Added local isCollapsed state to manage manual expand/collapse
• Implemented click handler to toggle isCollapsed when clicking on a selected item
• Added useEffect to reset isCollapsed when the item becomes deselected
• Refactored main component to use SidebarItem for cleaner structure

Key Logic

// Determine if item should be expanded
const shouldBeExpanded = isForceExpanded || isBreadcrumb || selected;
const isExpanded = shouldBeExpanded && !isCollapsed;

// Toggle on click when selected
const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
  if (selected) {
    event.preventDefault();
    setIsCollapsed((prev) => !prev);
  }
};

// Reset collapsed state when navigating away
useEffect(() => {
  if (!selected) {
    setIsCollapsed(false);
  }
}, [selected]);

Behavior

Before

• Clicking an active sidebar item with children: No action
• Navigation to another page: Dropdown expanded/collapsed strictly by breadcrumb logic

After

• 1st click on item: Navigates & expands dropdown (if applicable)
• 2nd click on same selected item: Collapses dropdown
• 3rd click: Expands again
• Navigating away: Resets collapse state for correct default behavior

Benefits

• Improved UX: Matches intuitive accordion-like patterns
• Enhanced Control: Users can collapse sections they're done with
• Backwards Compatible: Navigation behavior remains unchanged
• No Regressions: Collapsed state resets on navigation to avoid stale UI

Testing

• ✅ npm run tsc (TypeScript compilation)

• ✅ npm run lint (ESLint validation)

• All existing warnings were unrelated to this change
  Sidebar Dropdown Should Toggle When Clicking an Already-Selected Item #8149